{include file="../application/admin/view/health/base.html" /}
<div id="containerBox" v-cloak>
	<!--条件筛选-->
	<div class="choose-container">
		<div class="custom-choose display-flex">
			<div class="choose-status">
				<span class="choose-status-tip">筛选条件</span>
				<el-switch active-value="1" inactive-value="0" v-model="chooseType">
				</el-switch>
			</div>
			<div class="custom-search">
			</div>
		</div>
		<div v-if="chooseType==1">
			<div class="custom-choose-type display-flex">
				<div class="custom-choose-type-tip">
					视频名称
				</div>
				<div>
					<el-input style="width: 400px;" placeholder="请输入视频名称" v-model="searchForm.name" size="small">
					</el-input>
				</div>
			</div>
			<div class="custom-choose-sub display-flex">
				<div class="common-btn choose-btn choose-btn-active" style="margin-right: 20px;"
				     @click="operation('filter')">
					筛选
				</div>
				<div class="common-btn choose-btn" @click="operation('clear')">
					清空
				</div>
			</div>
		</div>
	</div>
	<!--表格-->
	<div class="custom-table">
		<div class="custom-header display-flex">
			<div class="display-flex">
				<el-button size="small" icon="el-icon-refresh" @click="getData"></el-button>
			</div>
		</div>
		<div class="custom-table-border">
			<el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
			          :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
			          :header-cell-class-name="tableCellClassName">
				<el-table-column fixed prop="name" label="视频名称" align="center">
				</el-table-column>
				<el-table-column label="视频封面" align="center">
					<template slot-scope="scope">
						<el-image style="width: 200px;height:120px" :preview-src-list="[scope.row.cover]"
						          :src="scope.row.cover"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="视频时长" prop="duration_text" align="center">
				</el-table-column>
				<el-table-column label="查看视频" align="center">
					<template slot-scope="scope">
						<i @click="operation('preview',scope.row)" class="el-icon-video-play"
						   style="font-size: 30px;"></i>
					</template>
				</el-table-column>
				<!--				<el-table-column fixed="right" label="操作" align="center" min-width="100">-->
				<!--					<template slot-scope="scope">-->
				<!--						<span class="edit-text" @click="operation('edit',scope.row.id)">编辑</span>-->
				<!--					</template>-->
				<!--				</el-table-column>-->
			</el-table>
		</div>
		<div class="page-container display-flex">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			               :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
			               layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
			</el-pagination>
		</div>
	</div>
</div>